<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ page isELIgnored="true" %>
<!-- 在线留言 -->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>考试记录</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>
<style>

    .test {
        position: relative;
        top: 0;
        margin-left: 200px;
        padding-bottom: 10px;
    }

    .el-carousel__item h3 {
        color: #475669;
        font-size: 14px;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
    }

    img {
        /*设置图片宽度和浏览器宽度一致*/
        width: 100%;
        height: inherit;
    }

    .mainContainer {
        width: 90%;
        margin: 0 auto;
    }

    .flex_space_between {
        display: flex;
        justify-content: space-between;
    }

    .well {
        min-height: 20px;
        padding: 19px;
        /*margin-bottom: 20px;*/
        background-color: #f5f5f5;
        border: 1px solid #e3e3e3;
        border-radius: 8px;
        -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
        box-shadow: inset 0 1px 1px rgb(0 0 0 / 5%);
    }

    .align_center {
        align-items: center;
    }

    .myTitle {
        font-size: 20px;
        font-weight: bold;
        color: #475669;
    }

    .table_container {
        margin-top: 20px;
    }

    .simple-answer-card {
        padding: 16px;
        margin-bottom: 16px;
        box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 12%);
    }

    .exam-box {
        padding: 16px;
        margin-bottom: 24px;
        box-shadow: 0 1px 6px rgb(0 0 0 / 12%), 0 1px 4px rgb(0 0 0 / 12%);
    }

    .litterError {
        background: #FFF0F7;
    }
</style>
<body>
<div class="test" id="examRecordDetailApp">
    <!-- 轮播图 start -->
    <div>
        <el-carousel indicator-position="outside">
            <el-carousel-item v-for="(item, index) in imgList" :key="index">
                <img :src="item.url" class="image">
            </el-carousel-item>
        </el-carousel>
    </div>
    <!-- 轮播图 end -->
    <div class="mainContainer">
        <!-- 头部 start -->
        <div class="flex_space_between align_center well">
            <div class="myTitle">考试详情</div>
            <div>
                <el-button plain @click="goBack">返回</el-button>
            </div>
        </div>
        <!-- 头部 end -->
        <!-- 列表 start -->
        <div class="table_container">
            <div class="exam-box" v-for="(item,index) in recordList"
                 :key="index" :class="{'litterError': item.answerStatus == 0}">
                <div class="flex justify-between content-center items-center ">
                    <div class="text-black font-semibold text-lg">
                        {{index + 1}}. {{item.name}}
                    </div>
                    <div class="mr-4">
                        <div v-if="item.answerStatus == 1">
                            <svg t="1652696516736" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="3908" width="64" height="64">
                                <path d="M997.888 70.144C686.592 261.12 460.8 502.272 358.912 623.104L110.08 428.032 0 516.608l429.568 437.248C503.296 764.416 737.792 394.24 1024 131.072l-26.112-60.928m0 0z"
                                      p-id="3909" fill="#1afa29"></path>
                            </svg>
                        </div>
                        <div v-else>
                            <svg t="1652696597913" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="6876" width="64" height="64">
                                <path d="M839 73.9c-1.2-2.4-3.7-9.8-7.4-9.8s-11.1 8.6-13.5 12.3l-13.5 12.3c-7.4-6.1-35.6-23.4-43-23.4-11.1 0-104.6 113.2-118.1 129.1l-60.2 68.8-30.7 38.1-43.1-83.6-50.4-100.8c-4.9-9.8-8.6-22.1-22.1-22.1-7.3 0-9.8 3.6-13.5 9.8-3.7 4.9-3.7 4.9-11.1 8.6-8.6 0-12.3 0-19.7 6.2-6.2-4.9-11.1-11.1-19.7-11.1-3.7 0-6.2 1.2-8.6 3.6l-8.6 7.4c-4.8 6.1-15.9 17.2-15.9 25.8 0 11 9.8 31.9 13.5 41.8l90.9 250.8-14.7 17.3c-66.4 79.8-159.8 190.5-210.2 279l-29.5 50.4c-8.6 14.7-29.5 44.3-29.5 60.2 0 3.7 3.8 6.2 6.2 8.6 8.6 7.3 3.6 14.7 1.2 24.5-2.5 7.4-3.7 12.3-3.7 19.7 0 13.5 11.1 27 18.5 38.1 7.3 12.2 9.9 24.5 25.8 24.5 17.2 0 49.2-3.6 63.9-14.7l243.4-377.5 115.6 178.5c6.1 9.8 30.7 54.1 46.7 54.1 14.8 0 38.1-16.1 40.6-30.8-2.6-4.9-6.2-12.3-6.2-17.2 0-7.5 19.7-14.9 24.6-19.7v-9.9c8.6-3.7 13.5-8.6 17.2-17.2l-95.9-205.3-38.2-76.3 13.6-19.7 174.6-225.9c11-14.8 28.3-38.1 41.8-50.4 4.9-5 13.5-12.3 13.5-19.7 0-8.6-19.7-22.1-24.6-34.4z"
                                      p-id="6877" fill="#e74c3c"></path>
                            </svg>
                        </div>
                    </div>
                </div>
                <div class="mt-1 mb -1">
                    <el-tag size="mini" v-if="item.type == 1">单选题</el-tag>
                    <el-tag size="mini" v-else-if="item.type == 2">多选题</el-tag>
                    <el-tag size="mini" v-else-if="item.type == 3">判断题</el-tag>
                    <el-tag size="mini" v-else-if="item.type == 4">填空题</el-tag>
                </div>
                <!-- 选项 start -->
                <div class="mt-3">
                    <div class="flex justify-content-between flex-wrap mt-4" v-if="item.type == 1">
                        <el-radio
                                v-for="(ans,innerIndex) in item.answer"
                                :key="innerIndex"
                                :label="ans.option"
                                v-model="item.options" border>
                            {{ans.option}}. {{ans.value}}
                        </el-radio>
                    </div>
                    <div class="flex justify-content-between flex-wrap mt-4" v-else-if="item.type == 2">
                        <el-checkbox
                                v-for="(ans,innerIndex) in item.answer"
                                :key="innerIndex"
                                :label="ans.option" border>
                            {{ans.option}}. {{ans.value}}
                        </el-checkbox>
                    </div>
                </div>
                <!-- 选项 end -->

                <!-- 答案 start -->
                <div class="mt-2">
                    <div class="mt-1">
                        <span>正确答案：</span>{{item.correctAnswer}}
                    </div>
                    <div class="mt-1">
                        <span>你的答案：</span>{{item.option}}
                    </div>
                </div>
                <!-- 答案 end -->
                <!-- 分析 start -->
                <div class="mt-2">
                    <div><span class="text-black font-semibold">分析：</span>
                        {{item.analysis}}
                    </div>
                </div>
                <!-- 分析 end -->
            </div>
        </div>
    </div>

</div>
<div style="height: 20px"></div>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<%--<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>--%>
<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

<!-- axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入element-ui组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    const examRecordDetailApp = new Vue({
        el: '#examRecordDetailApp',
        data() {
            return {
                // 轮播图
                imgList: [],
                recordId: '',
                recordList: []
            }
        },
        methods: {
            /**
             * [通过参数名获取url中的参数值]
             * 示例URL:http://htmlJsTest/getrequest.html?uid=admin&rid=1&fid=2&name=小明
             * @param  {[string]} queryName [参数名]
             * @return {string}           [参数值]
             */
            GetQueryValue: function (queryName) {
                const reg = new RegExp("(^|&)" + queryName + "=([^&]*)(&|$)", "i");
                const r = window.location.search.substr(1).match(reg);
                if (r != null) {
                    return decodeURI(r[2]);
                } else {
                    return '';
                }
            },
            getRecordDetail: function () {
                const _this = this;
                this.recordList = []
                axios({
                    url: '/jspmk28g8/examination/getExamRecordDetail',
                    method: 'get',
                    params: {
                        recordId: this.recordId
                    },
                    headers: {
                        'token': window.localStorage.getItem('Token')
                    }
                }).then(res => {
                    console.debug(res);
                    const {code, data} = res.data;
                    if (code === 200) {
                        data.forEach(it => {
                            let temp = {
                                id: it.id,
                                name: it.name,
                                type: it.type,
                                score: it.score,
                                answer: it.answer,
                                correctAnswer: it.correctAnswer,
                                analysis: it.analysis,
                                option: it.option,
                                answerStatus: it.answerStatus,
                            }
                            if (it.type === 1) {
                                temp.answer = JSON.parse(it.answer);
                            } else if (it.type === 2) {
                                temp.answer = JSON.parse(it.answer);
                            }
                            _this.recordList.push(temp)
                        })
                    }
                }).catch(err => {
                    console.error(err);
                })
            },
            goBack: function () {
                window.history.back();
            }
        },
        mounted: function () {
            const _this = this;
            // 获取当前考试记录的id
            const recordId = this.GetQueryValue("recordId");
            if (recordId) {
                _this.recordId = recordId;
            } else {
                // 未获取到试卷id，跳转到列表页
                this.$confirm('获取数据id失败，将返回列表', '提示', {
                    confirmButtonText: '确定',
                    showCancelButton: false,
                    showClose: false,
                    closeOnPressEscape: false,
                    closeOnClickModal: false,
                    type: 'warning'
                }).then(() => {
                    window.history.back()
                })
                return false;
            }
            // 加载轮播图数据
            axios({
                url: '/jspmk28g8/config/list',
                method: 'get',
            }).then(function (res) {
                console.debug(res);
                const {code, data} = res.data;
                if (code === 0) {
                    _this.imgList = [];
                    if (data.list) {
                        data.list.forEach(function (item) {
                            _this.imgList.push({
                                id: item.id,
                                url: '/jspmk28g8/' + item.value
                            });
                        });
                    }

                }
            }).catch(function (err) {
                console.error(err);
            })
            this.getRecordDetail();

        }
    });
</script>
</body>
</html>